<template>
  <view class="contenter">
    <view class="tabs u-flex flex_j_c">
      <view class="tab flex flex_j_c" @click="tabChangeIndex(index)" :class="{'active':index == tabIndex}" v-for="(data,index) in tab" :key="index">{{data}}</view>
    </view>
    <view class="content">
      <view class="head u-flex flex_bt" @click="changeUser(1)">
        <view class="name">选择用户</view>
        <view>
          <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
        </view>
      </view>
      <view class="bottom u-flex flex_bt">
        <view class="u-flex">
          <view>
            <item-image :type="'1'" :img="user.userimg" :size="112"  class="u-margin-right-8"  :fade="false"/>
          </view>
          <view class="name">
            <view class="user">{{user.nickname}}</view>
            <view class="phone">{{user.phone || ''}}</view>
          </view>
        </view>
        <view class="radio flex_j_c flex">
          <u-icon name="checkbox-mark"  color="#ffffff" size="21"></u-icon>
        </view>
      </view>
    </view>
    <view class="content" v-if=" tabIndex == 1">
      <view class="head u-flex flex_bt" @click="changeUser(2)">
        <view class="name">选择技师</view>
        <view>
          <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
        </view>
      </view>
      <view class="bottom u-flex flex_bt" v-if="rid">
        <view class="u-flex">
          <view>
            <item-image :type="'1'" :img="jishi.userimg" :size="112"  class="u-margin-right-8"  :fade="false"/>
          </view>
          <view class="name">
            <view class="user">{{jishi.nickname}}</view>
            <view class="phone">{{jishi.phone || ''}}</view>
          </view>
        </view>
        <view class="radio flex_j_c flex">
          <u-icon name="checkbox-mark"  color="#ffffff" size="21"></u-icon>
        </view>
      </view>
    </view>
    <!--下单-->
    <view class="head u-flex flex_bt" @click="orderShop" v-show="tabIndex == 0">
      <view class="name">选择下单商品</view>
      <view>
        <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
      </view>
    </view>
    <!--预约-->
    <view v-show="tabIndex == 1">
<!--      <view class="xiangmu " >-->
<!--        <view class="heads u-flex flex_bt" @click="changeShop">-->
<!--          <view class="name">选择用户旗下项目</view>-->
<!--          <view>-->
<!--            <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>-->
<!--          </view>-->
<!--        </view>-->

<!--        <view class="u-flex flex_bt item" v-for="(data,index) in serveData" v-if="serviceId && data.sid">-->
<!--          <view class="flex">-->
<!--            <item-image  :img="data.image" :width="160" :height="160"  :fade="false"/>-->
<!--            <view class="flex flex_bt flex-column">-->
<!--              <view class="name">{{data.sname}}</view>-->
<!--              <view class="text">剩余次数：{{data.num}}次</view>-->
<!--              &lt;!&ndash;          <view class="price">产品已用完</view>&ndash;&gt;-->
<!--            </view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
      <view class="head u-flex flex_bt" @click="changeTime">
        <view class="name">选择时间</view>
        <view>
          <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import user from "../../api/user_login";
export default {
  name: "placeAnOrder",
  data(){
    return{
      tab:['帮Ta下单','帮Ta预约'],
      tabIndex:0,
      option: {},
      user: {},
      loadingText:'',
      type:'',
      jishi:'',//技师详情
      userId:'',//客户id
      rid:'',//技师id
      serviceId:'',//服务id
      serveData:{
        sid:'',
        num:0,
      },//服务详情
    }
  },
  onShow(){
    let id = uni.getStorageSync('userId')
    let rid = uni.getStorageSync('rid')
    //选择用户后请求
    if(id){
      this.userId = id
      this.setData()
    }
    if(rid){
      this.rid = rid
      this.setData()
    }
  },
  onLoad(option){
    console.log(option)
    this.type = uni.getStorageSync('type')
    this.tabIndex = option.type || 0
    this.userId = option.uid || ''
    this.rid = option.rid || ''
    this.serviceId = option.id|| ''//服务id
    this.setData()
  },
  methods:{
    setData(){
      //客户详情
      this.$api.userInformation({id:this.userId}).then(res => {
        this.user = res.data
        this.user.phone = this.phone(this.user.phone)
      })
      //技师详情
      if(this.rid){
        this.$api.tecDetail({id:this.rid}).then(res => {
          this.jishi = res.data
        })
      }
      //客户服务详情
      if(this.serviceId){
        let form ={
          service_id:this.serviceId,
          id:this.userId,
        }
        this.$api.userServiceId(form).then(res => {
          if(res.data ){
            this.serveData = res.data
          }
        })
      }
    },
    tabChangeIndex(index){
      this.tabIndex = index
      if(index==1){
        this.changeShop()
      }
    },
    //选择用户
    changeUser(type){
      this.$u.route({
        url:'/pagesA/changeUser/index',
        params: {
          id:this.user.id,
          oid:this.jishi.id ,
          rid:this.serviceId,
          type:type,//1代表用户 2代表技师
        }
      })
    },
    //选择时间
    changeTime(){
      if(this.type == 2 && !this.jishi ){
        return this.$u.toast('请先选择技师！')
      }
      if( this.serveData.sid == ''){
        return this.$u.toast('请选择项目！')
      }
      if( this.serveData.num == 0 && this.serveData.id){
        return this.$u.toast('旗下项目次数不足，请重新选择项目！')
      }

      //清空预约时间
      uni.removeStorage({
        key: 'time',
        success: function (res) {
        }
      });
      this.$u.route({
        url:'/pagesA/changeTime/index',
        params: {
          sid: this.serviceId,
          id: this.userId,
          rid: this.rid
        }
      })
    },
    //预约选择商品
    changeShop(){
      this.$u.route({
        url:'/pagesA/changeShop/index',
        params: {
          // sid: this.serviceId || '',
          id: this.userId,
          rid: this.rid,
          data:JSON.stringify(this.user)
        }
      })
    },
    //选择商品
    orderShop(){
      uni.removeStorage({
        key: 'zengpin',
      });
      this.$u.route({
        url:'/pagesA/orderShop/index',
        params: {
          id: this.userId,
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
  .tabs{
    background: white;
    padding: 32rpx;
    border-radius: 4rpx;
    .tab{
      height: 92rpx;
      font-size: 32rpx;
      color: $uni-color-primary;
      flex: 1;
      align-items: center;
      border: 2rpx solid $uni-color-primary;

    }
    .active{
      color: white;
      background:$uni-color-primary;
    }
  }
  .xiangmu{
    background: white;
    margin: 0 32rpx;
    margin-bottom: 20rpx;
    .item{
      padding:  20rpx;
      .flex-column{
        margin-left: 20rpx;
      }
      .name{
        font-size: 32rpx;
        font-weight: bold;
        color: #3B3B3B;
      }
      .text{
        font-size: 28rpx;
        color: #959595;
      }

    }

  }
  .head{
    min-height: 80rpx;
    margin: 0 32rpx;
    padding: 0 20rpx;
    background: white;
    margin-bottom: 30rpx;
    .name{
      font-size: 32rpx;
      color: $uni-color-primary;
      font-weight: bold;
    }
  }
  .heads{
    min-height: 80rpx;
    background: white;
    padding: 0 20rpx;

    .name{
      font-size: 32rpx;
      color: $uni-color-primary;
      font-weight: bold;
    }
  }
  .content{
    margin: 30rpx 32rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    .head{
      height: 88rpx;
      margin: 0;
      border-bottom:2rpx solid $uni-border-color ;

    }
    .bottom{
      padding: 0 20rpx;
      height: 192rpx;
      .name{
        margin-left: 40rpx;
        .user{
          font-size: 32rpx;
          font-weight: bold;
          color: #000000;
          margin-bottom: 20rpx;
        }
        .phone{
          font-size: 28rpx;
          color: #7B7B7B;
        }
      }
      .radio{
        width: 40rpx;
        height: 40rpx;
        background: $uni-color-primary;
        border-radius: 50%;
      }
    }
  }
</style>